<template>
  <div>
    <a-drawer
      :title="title"
      :width="drawerWidth"
      @close="handleClose"
      :visible="visible"
      :confirmLoading="confirmLoading"
    >
      <div
        :style="{
          width: '100%',
          border: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
        }"
      >
        <a-spin :spinning="confirmLoading">
          <a-form-model ref="ruleForm" :model="model" :rules="rules">
            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="用户名称"
              prop="nae"
              hasFeedback
            >
              <a-input placeholder="请输入用户名称" v-model.trim="model.name" />
            </a-form-model-item>
            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="选择角色"
              hasFeedback
            >
              <a-select default-value="lucy" style="width: 120px">
                <a-select-option value="jack">
                  Jack
                </a-select-option>
                <a-select-option value="lucy">
                  Lucy
                </a-select-option>
                <a-select-option value="disabled" disabled>
                  Disabled
                </a-select-option>
                <a-select-option value="Yiminghe">
                  yiminghe
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-form-model>
        </a-spin>
        <a-row :style="{ textAlign: 'right' }">
          <a-button :style="{ marginRight: '8px' }" @click="handleClose">
            关闭
          </a-button>
          <a-button @click="handleOk" type="primary">确定</a-button>
        </a-row>
      </div>
    </a-drawer>
  </div>
</template>

<script>
const treeData = [
  {
    title: "0-0",
    key: "0-0",
    children: [
      {
        title: "0-0-0",
        key: "0-0-0",
        children: [
          { title: "0-0-0-0", key: "0-0-0-0" },
          { title: "0-0-0-1", key: "0-0-0-1" },
          { title: "0-0-0-2", key: "0-0-0-2" },
        ],
      },
      {
        title: "0-0-1",
        key: "0-0-1",
        children: [
          { title: "0-0-1-0", key: "0-0-1-0" },
          { title: "0-0-1-1", key: "0-0-1-1" },
          { title: "0-0-1-2", key: "0-0-1-2" },
        ],
      },
      {
        title: "0-0-2",
        key: "0-0-2",
      },
    ],
  },
  {
    title: "0-1",
    key: "0-1",
    children: [
      { title: "0-1-0-0", key: "0-1-0-0" },
      { title: "0-1-0-1", key: "0-1-0-1" },
      { title: "0-1-0-2", key: "0-1-0-2" },
    ],
  },
  {
    title: "0-2",
    key: "0-2",
  },
];
export default {
  data() {
    return {
      title: "", // 标题
      visible: false, // 状态、
      drawerWidth: 700, // 抽屉宽度
      model: {},
      show: true, //根据菜单类型，动态显示隐藏表单元素
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      validateStatus: "",
      treeData,
      expandedKeys: ["0-0-0", "0-0-1"],
      autoExpandParent: true,
      checkedKeys: ["0-0-0"],
      selectedKeys: [],
    };
  },
  watch: {
    checkedKeys(val) {
    },
  },
  computed: {
    rules() {
      return {
        name: [{ required: true, message: "请输入菜单标题!" }],
        component: [{ required: this.show, message: "请输入前端组件!" }],
        url: [{ required: this.show, message: "请输入菜单路径!" }],
        permsType: [{ required: true, message: "请输入授权策略!" }],
        perms: [
          { required: false, message: "请输入授权标识!" },
          { validator: this.validatePerms },
        ],
      };
    },
  },
  methods: {
    onExpand(expandedKeys) {
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    onCheck(checkedKeys) {
      this.checkedKeys = checkedKeys;
    },
    onSelect(selectedKeys, info) {
      this.selectedKeys = selectedKeys;
    },
    // 新增
    async modalAdd() {
      this.modalEdit({
        status: "1",
        permsType: "1",
        sortNo: 1.0,
        route: true,
        menuType: 0,
      });
    },
    // 编辑
    async modalEdit(record) {
      this.resetScreenSize();
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.ruleForm.resetFields();
      });
      this.model = Object.assign({}, record);
    },

    onChangeMenuType() {},
    handleOk() {
      const that = this;
      // 触发表单验证
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
        } else {
          return false;
        }
      });
    },
    // 关闭
    handleClose() {
      this.visible = false;
      this.$refs.ruleForm.resetFields();
    },
    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize() {
      let screenWidth = document.body.clientWidth;
      if (screenWidth < 500) {
        this.drawerWidth = screenWidth;
      } else {
        this.drawerWidth = 700;
      }
    },
  },
};
</script>

<style></style>
